<template>
    <el-card class="box-card">
        <div slot="header" class="clearfix">
            <span>用户登录</span>
        </div>
        <div>
            <el-form class="demo-form-inline" :model="login" :label-position="labelPosition" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="login.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="login.password" show-password></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="userLogin">提交</el-button>
                    <el-button>重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</template>
<script>
export default {
    data(){
        return {
            labelPosition:'right',
            login:{
                username:"",
                password:''
            },
            username:""
        }
    },
    watch:{
        username(newVal){
            console.log(newVal);
            if(newVal){
                this.userLogin()
            }
        }
    },
    methods:{
        userLogin(){
            if(this.login.username == "admin" && this.login.password == "123456"){
                this.$router.push({
                    path:"/"
                })
                localStorage.setItem("usr",this.login.username)
                this.username = this.login.username
            }
        }
    }
}
</script>
<style>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}

.box-card {
    width: 480px;
    margin: 200px auto;
}
</style>